<template>
    <div>
        <Select
            v-model="currentValue"
            :size="size"
            :loading="loading"
            :placeholder="placeholder"
            :multiple="multiple"
            :disabled="disabled"
            :filterable="filterable"
            :transfer="transfer"
            :clearable="clearable"
            :placement="placement"
            :transfer-class-name="transferClassName"
            :prefix="prefix"
            :max-tag-count="maxTagCount"
            :max-tag-placeholder="maxTagPlaceholder"
            @on-change="handleChange"
            @on-query-change="handleQueryChange"
            @on-clear="handleClear"
            @on-open-change="handleOpenChange"
            @on-select="handleSelect"
        >
            <Option v-for="(item, i) in dictData" :key="i" :value="item.value">{{ item.title }}</Option>
        </Select>
    </div>
</template>

<script>
import { getDictDataByType } from '@/api/index';
export default {
    name: 'dict',
    props: {
        value: '',
        dict: String,
        placeholder: {
            type: String,
            default: '请选择'
        },
        placement: {
            type: String,
            default: 'bottom-start'
        },
        size: String,
        multiple: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        filterable: {
            type: Boolean,
            default: false
        },
        transfer: {
            type: Boolean,
            default: false
        },
        transferClassName: String,
        prefix: String,
        maxTagCount: Number,
        maxTagPlaceholder: Function,
        clearable: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            currentValue: this.value,
            dictData: [],
            loading: false
        };
    },
    methods: {
        getData(v) {
            this.loading = true;
            getDictDataByType(v).then(res => {
                this.loading = false;
                if (res.success) {
                    this.dictData = res.result;
                }
            });
        },
        handleChange(v) {
            this.$emit('input', v);
            this.$emit('on-change', v);
        },
        handleQueryChange(v) {
            this.$emit('on-query-change', v);
        },
        handleClear() {
            this.$emit('on-clear', '');
        },
        handleOpenChange(v) {
            this.$emit('on-open-change', v);
        },
        handleSelect(v) {
            this.$emit('on-select', v);
        },
        setCurrentValue(value) {
            if (value === this.currentValue) {
                return;
            }
            this.currentValue = value;
            this.$emit('on-change', this.currentValue);
        }
    },
    watch: {
        value(val) {
            this.setCurrentValue(val);
        },
        dict(val) {
            this.getData(val);
        }
    },
    mounted() {
        this.getData(this.dict);
    }
};
</script>
